<template>
  <!-- 项目看板 -->
    <div class="">
        <div class="tabsBox d-flex m-b20">
            <div
                    class="tabsItem"
                    :class="item.id == state.tabId ? 'tabsItemHover' : ''"
                    v-for="item in tabsList"
                    :key="item.id"
                    @click="state.tabId = item.id"
            >
                {{ item.name }}
            </div>
        </div>
    </div>

    <div class="content">
        <tabs1-from
                ref="tabs1From"
                :projectId="projectId"
                :projectType="projectType"
                v-if="state.tabId === '1'"
                @emitFormInline="emitFormInline"
        ></tabs1-from>

        <!--	项目里程碑	-->
        <project-milestones
                :projectId="projectId"
                :projectType="projectType"
                :projectName="form.projectName"
                v-if="state.tabId === '2'"
        />
    </div>
</template>

<script setup>
import { ref, reactive  } from "vue";
import Tabs1From from "@/views/constructionProjectManage/projectsPectaculars/components/Tabs1From.vue";
import ProjectMilestones from "../components/projectMilestones.vue";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { useRouter, useRoute } from "vue-router";

let router = useRouter();
let route = useRoute();
const projectType = getURLhandler(route.path).projectType;
const projectId = getURLhandler(route.path).id;
const tabId = getURLhandler(route.path).tabId;

// tabs相关
const tabsList = ref([
    {
        name: "项目基本信息",
        id: "1",
    },
    {
        name: "项目里程碑",
        id: "2",
    }
]);

const tabs1From = ref(null);

const state = reactive({
    tabId: "1",
});
let form = ref({
    projectName: "",
    projectCode: "",
    dealDepartmentId: "",
    type:''
});
const emitFormInline = (e) => {

    form.value = {
        ...e,
    };
};

const handel = () => {};
</script>
<style lang="scss" scoped>
.tabsBox {
  margin-bottom: 30px;
  .tabsItem {
    padding: 0 30px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin-right: 20px;
    border-radius: 5px;
    color: #ccc;
    cursor: pointer;
  }
  .tabsItemHover {
    border: 1px solid #fc702b;
    color: #fc702b;
    background: #fff8f6;
  }
}
</style>
